<template>
	<view v-if="!isLoading" class="container">
<!-- 		<view class="live-video" style="background-color: #000;"  v-if="!isPlaying">
			 <u-icon  class="play-btn-icon" @click="playVideo" name="play-circle-fill" color="#fff" size="108"></u-icon>
		</view> -->

		 <!-- #ifdef APP-PLUS || H5 -->
		 <view class="live-video">
			 <view class="live-video-btn" v-if="!isPlaying">
			 	 <image :src="thumbnail" class="course-bg-image" mode="aspectFill"></image>
			 	 <image  class="play-btn-icon" @click="playVideo" src="/static/img/bfq-icon.png" mode=""></image>
			 	 <!-- <u-icon  class="play-btn-icon" @click="playVideo" name="play-circle-fill" color="#19be6b" size="108"></u-icon> -->
			 </view>
			<smm-video 
			    v-else
				:height="236"
				:isDirectory="false"
				:poster="thumbnail"
				:src="url"
				:isDanmu.sync="false"
				:isDanmuBtn="false"
				:autoNext="false"
				@play="handlePlay"
				@pause="handlePause"
				@timeupdate="onTimeUpdate"
				@waiting="onWaiting"
				@ended="onEnded"
				@error="onError"
			></smm-video>
		 </view>
		 <!-- #endif -->
		 <!-- #ifdef MP-WEIXIN -->
		 <view class="live-video">
			 <view class="live-video-btn" v-if="!isPlaying">
			 	 <image :src="thumbnail" class="course-bg-image" mode="aspectFill"></image>
			 	 <image  class="play-btn-icon" @click="playVideo" src="/static/img/bfq-icon.png" mode=""></image>
			 	 <!-- <u-icon  class="play-btn-icon" @click="playVideo" name="play-circle-fill" color="#19be6b" size="108"></u-icon> -->
			 </view>
			 <view v-else>
				 <video
				  	:src="url"
				  	ref="videoPlayer"
				  	id="videoPlayer"
				  	loop
				  	:poster="thumbnail"
				  	type="application/x-mpegURL"
				 	:autoplay="false"
				 	:show-center-play-btn="false"
				 	@play="handlePlay"
				 	@pause="handlePause"
				 	@timeupdate="onTimeUpdate"
				 	@waiting="onWaiting"
				 	@ended="onEnded"
				 	@error="onError"
				  ></video>
			 </view>
		 </view>
		  <!-- #endif -->

		 <view class="card-area">
			<u-collapse :head-style="{fontSize: '32rpx',fontWeight: 'bold',lineHeight: '30rpx',margin: '10rpx 0'}">
				<u-collapse-item :title="info.detail && info.detail.title ? info.detail.title : '-'" >
				 	<view v-html="info.detail && info.detail.content ? info.detail.content : ''"></view>
				</u-collapse-item>
			</u-collapse>
			<!-- <view class="course-title">{{ info.course && info.course.title ? info.course.title : '-' }}二次元插画魔鬼特训班</view> -->
			<view class="course-content">
				<image class="course-avatar" :src="info.teacher && info.teacher.avatar ? getImgUrl(info.teacher.avatar) : '-'" mode="scaleToFill"></image>
				<!-- <image class="course-avatar" src="/static/img/live_img2.jpg"></image> -->
				<view class="content uni-row uni-column">
					<text class="name">{{info.teacher && info.teacher.name ? info.teacher.name : '-'}}</text>
					<text class="text-teacher">{{info.teacher && info.teacher.intro ? info.teacher.intro : ''}}</text>
				</view>
			</view>
			<view class="chapter-list">
				<scroll-view scroll-y="true" id="courseBox">
					<u-collapse :head-style="{fontSize: '28rpx',lineHeight: '30rpx',margin: '10rpx 0'}">
						<u-collapse-item :title="item.title" :index="index" :open="item.open" v-for="(item,index) in courseList" :key="item.id">
							<view class="play-list">
								<scroll-view scroll-x="true" id="courseBox2" :scroll-top="scrollTop2" @scrolltolower="scrollToBottom2" :scroll-into-view="scrollToView2">
									<view class="course-box">
										<view :class="['list-mk',selectId == itms.id ? 'list-mk-active' : '']" @click="handleSelect(itms)" v-for="(itms, idx) in item.course" :key="itms.id">
											<view class="tag-vip" v-if="itms.permission == 20">
												<view class="course-vip">vip</view>
											</view>
											<view class="disabled-mk" v-if="itms.expire_time > 0">
												<u-icon name="lock" color="#fff" size="40" style="margin-bottom: 10rpx;margin-top: 12rpx;"></u-icon>
												<u-count-down :timestamp="itms.expire_time" separator-size="26" color="#f50" :height="30" @end="handleEnd(itms,idx)"></u-count-down>
											</view>
											<!-- <view style="text-align: right;">{{itms.expire_time != '' ? formattedDate(itms.expire_time) : ''}}</view> -->
											<view>{{itms.title}}</view>
										</view>
									</view>
								</scroll-view>
								<uni-icons type="right" size="20" style="flex:0.5" @click="handleShow(item.course)"></uni-icons>
							</view>
						</u-collapse-item>
					</u-collapse>
				</scroll-view>

				<u-popup v-model="show"  mode="bottom" closeable>
					<scroll-view scroll-y="true" style="height: 500rpx;">
						<view class="course-box course-box-2">
							<view :class="['list-mk',selectId == item.id ? 'list-mk-active' : '']" @click="handleSelect(item)" v-for="(item, index) in selectList" :key="item.id">
								<view class="tag-vip" v-if="item.permission == 20">
									<view class="course-vip">vip</view>
								</view>
								<view class="disabled-mk" v-if="item.expire_time > 0">
									<u-icon name="lock" color="#fff" size="40" style="margin-bottom: 10rpx;margin-top: 12rpx;"></u-icon>
									<u-count-down :timestamp="item.expire_time" separator-size="26" color="#f50" :height="30" @end="handleEnd(item,index)"></u-count-down>
								</view>
								<!-- <view style="text-align: right;">{{item.expire_time != '' ? formattedDate(item.expire_time) : ''}}</view> -->
								<view>{{item.title}}</view>
							</view>
						</view>
					</scroll-view>
				</u-popup>
			</view>
			 <!-- 其他信息 -->
			<!-- <view class="order-info i-card">
			   <view class="info-item">
			     <view class="item-lable">锁定时间</view>
			     <view class="item-content">
			       <text>{{info.course && info.course.expire_time ? formatTime(info.course.expire_time) : '-'}}</text>
			     </view>
			   </view>
			   <view class="info-item">
			     <view class="item-lable">创建时间</view>
			     <view class="item-content">
			       <text>{{info.course && info.course.created_at ? formatTime(info.course.created_at) : '-'}}</text>
			     </view>
			   </view>
			</view> -->
		</view>
		<view>
			 <!-- tab栏 -->
			 <view  style="width: 100%;background-color: #fff;">
				 <view style="width: 180rpx;">
				 	<u-tabs :list="tabs" :is-scroll="false" v-model="curTab" :active-color="appTheme.mainBg" :duration="0.2" @change="onChangeTab" />
				 </view>
			 </view>
			 <view v-if="curTab == 0">
				 <!-- <image class="details-image" :src="info.course && info.course.thumbnail ? getImgUrl(info.course.thumbnail) : ''" mode="widthFix"></image> -->
				 <!-- <view class="tab-title">内容</view>
				 <view class="con-ss" v-html="info.detail && info.detail.content ? info.detail.content : ''"></view> -->
				 <!-- <view class="tab-title">描述</view> -->
				 <view class="con-ss" v-html="info.detail && info.detail.description ? info.detail.description : ''"></view>
			 </view>
			 <view v-if="curTab == 1" class="comment-box">
				<scroll-view scroll-y="true" id="courseMessage" :scroll-top="scrollTop" @scrolltolower="scrollToBottom" :scroll-into-view="scrollToView">
					<view class="course-message">
						<view class="item uni-row" v-for="item in comment_list" :key="item.id">
							<image class="avatar" :src="item.user && item.user.avatar ? item.user.avatar : '-'" mode="scaleToFill"></image>
							<view class="content uni-row uni-column">
								<text class="name">{{item.user && item.user.nick_name ? item.user.nick_name : '-'}}</text>
								<text class="text">{{item.content}}</text>
								<view class="line uni-row uni-between mt-5">
									<!-- 时间 -->
									<text class="time">{{formattedDate(item.created_at)}}</text>
									<!-- 删除 -->
									<view class="icon uni-row uni-center">
										<!-- <text class="dot"></text> -->
										<uni-icons type="trash" size="20" @click="handleDelete(item)"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="foot-position" :style="`bottom:${keyboardHeight}px`">
					<view class="foot-content">
						<view class="left-c">
							<input v-model="messages" class="foot-input" placeholder="与大家互动一下..." type="text" :adjust-position="false" @keyboardheightchange="onKeyborardHeightChange" @blur="handleBlur"  @keydown.enter="handleSendMsg" />
							<image class="image-item" src="/static/emoji.png"  mode="scaleToFill" @click.stop="showEmoji()"></image>
						</view>
						<view class="button" :class="{ disabled }" @click="handleSendMsg()">发送</view>
					</view>
					<view class="emoji-box" :style="{display: emojiVisible ? 'block' : 'none'}">
						<view class="emoji-title">表情</view>
						<view style="display: flex;flex-wrap: wrap;">
							<view v-for="item in emoji" :key="item" class="emoji-item" @click="handleChang(item)">
								<text style='font-size:36rpx;cursor:pointer'>{{item.emoji}}</text>
							</view>
						</view>
					</view>
				</view>
			 </view>
		</view>
	</view>
</template>

<script>
    import { timestampChangDate, ImgUrlPrefix } from '@/utils/util.js'
    import * as FindApi from '@/api/find'
	import { STATUS } from '@/store/mutation-types'
	import storage from '@/utils/storage'
	import emoji from "../../static/emoji.json"
	import smmVideo from "../../components/smm-video/smm-video.vue"
	// tab栏数据
	const tabs = [{
		  name: `课程详情`,
		  value: 'all'
		},
		// {
		//   name: `课程评论`,
		//   value: 'payment'
		// }
	]
	export default {
	  data() {
	    return {
	       isLoading:false,
		   id: '',
		   info: {},
		   // tab栏数据
		   tabs,
		   // 当前标签索引
		   curTab: 0,
		   url: '',
		   messages: '',
		   emoji: emoji,
		   emojiVisible:false,
		   scrollTop: 0,
		   scrollToView: '', // 滚动目标元素ID
		   comment_list: [], //评论列表
		   disabled:true,
		   keyboardStatus: false,
		   keyboardHeight: 0,
		   isPlaying: false,
		   nowCourse: '',
		   scrollTop2: 0,
		   scrollToView2: '', // 滚动目标元素ID
		   show: false,
		   selectId: '',
		   selectObject: {},
		   selectList: [],
		   recordId: '', //上报id
		   timer: null, // 定时器
		   status: null,
		   startTime: 0,
		   endTime: 0,
		   isStart: true,
		   isEnd: false,
		   isError: false,
		   duration: 0,
		   thumbnail: null // 封面图
	    }
	  },
	
	  /**
	   * 生命周期函数--监听页面加载
	   */
	  onLoad(options) {
	      this.id = options.id
		  this.status = storage.get(STATUS)
		  //设置title标题
		  if (options) {
		  	this.nowCourse = options.name
		  	uni.setNavigationBarTitle({
		  		title: this.nowCourse
		  	})
			this.thumbnail = options.thumbnail ? this.getImgUrl(options.thumbnail) : '' //封面图
		  }
		  this.getCourseList()
		  
	  },
	  onUnload() {
		console.log('页面卸载')
		const app =this
		if(app.timer){
			clearInterval(app.timer);
			app.timer = null;
		}
	  },
	  watch: {
	  	messages: {
	  		handler(newVal,oldVal) {
	  			if(newVal) {
	  				this.disabled = false
	  			} else{
	  				this.disabled = true
	  			}
	  		},
	  		deep:true
	  	}
	  },
	  computed: {
		  courseList() {
			  let array  = []
			  if(this.info.course) {
				  return this.info.course.map((row, idx) =>{
				     array = row.course.map((item,index) => {
						  let obj = {...item, expire_time: this.get_expire_time(item.expire_time)}
						  return {...item, expire_time: item.expire_time ? this.get_expire_time(item.expire_time) : -1 }
				     })
					 return {...row, course: array, open: idx == 0 ? true: false}
				  })
				  // return this.info.course.map((row, index) =>{
					 //  return {...row, course: array[index], open: index == 0 ? true: false}
				  // })
			  }
		  }
	  },
	  methods: {
		playVideo() {
		  this.getCoursePalyer()
		},
		// 课程详情
		getCourseList() {
			const app = this
			FindApi.courseDetail({ id: app.id }, { load: false })
			.then(result => {
			  // 合并新数据
			  console.log(result)
			  app.info = result.data
			  let array = result.data.course.map(row =>
				  row.course.filter((item, index) => item.permission == 10 && app.get_expire_time(item.expire_time) <= 0 || (app.get_expire_time(storage.get(STATUS)) > 0 && item.permission == 20) || index == 0) // 判断权限是所有人并且 锁定时间小于0，权限是会员并且 当前用户会员未过期符合条件就返回
				)
			  console.log(array,result.data.course,'array')
			  app.selectId = array.length > 0 && array[0].length > 0 ? array[0][0]['id'] : '' // 默认进入选择第一个
			  app.selectObject = array.length > 0 && array[0].length > 0 ? array[0][0] : {}
			}).catch(err=> {
				
			})
		},
		// 评论列表
		getCommentList: function() {
			const app = this
			FindApi.corseCommentList({ id: app.id }, { load: false })
			.then(result => {
			  // 合并新数据
			  console.log('评论列表',result)
			  app.comment_list = result.data.items
			}).catch(err=> {
				
			})
		},
		// 视频播放
		getCoursePalyer: function() {
			const app = this
			console.log('app.selectId', app.selectId)
			if(app.selectId) {
				app.isError = false
				FindApi.coursePalyer({ id: app.selectId, courseId: app.info.detail.id }, { load: false })
				.then(result => {
				  // 合并新数据
				  console.log(result)
				  app.url = result.data.url
				  app.recordId = result.data.recordId
				  setTimeout(() =>{
					    app.handlePlay()
				  }, 1000)
				}).catch(err=> {
					
				})
			} else {
				// app.$toast('请选择课时')
			}
		},
		// 课程上报
		getReport() {
			const app = this
			console.log('时间2222',app.startTime, app.endTime )
			// app.isStart = true
			FindApi.courseReport({ id: app.recordId, start: app.startTime, end: app.endTime }, { load: false })
			.then(result => {
			  // 合并新数据
			  console.log(result)
			  app.isStart = true
			}).catch(err=> {
				
			})
		},
		// 视频播放
		handlePlay() {
			const app = this
			app.videoContext = uni.createVideoContext('videoPlayer');//创建视频实例指向video
			console.log(this.selectObject,app.get_expire_time(storage.get(STATUS)), 'selectObject')
			if(app.get_expire_time(storage.get(STATUS)) > 0 || app.selectObject.permission == 10) {
				if(app.url && !app.isError) {
					app.isPlaying = true;
					app.videoContext.play();  // 播放
					// app.getReport()
					console.log('视频播放1111111',app.videoContext)
					if(app.timer){
						clearInterval(app.timer);
						app.timer = null;
					}
					app.timer = setInterval(() => {
						app.getReport()
					}, 60000)
				} else {
					app.isPlaying = false
					app.$toast('视频出错')
				}
			} else {
				app.isPlaying = false
				app.videoContext.pause();  // 停止
				uni.showToast({
				  title: '会员权限已过期',
				  icon: "none",
				  duration: 2500
				})
			}

		},
		// 视频暂停
		handlePause() {
			this.videoContext.pause();  // 停止
			// this.isPlaying = false;
		},
		// 播放进度变化时触发
		onTimeUpdate(e) {
			const app = this
			app.duration = e.detail.duration // 总时长秒
			if(app.isStart) {
				app.startTime = Math.round(e.detail.currentTime)  // 获取开始播放的秒数并赋值
				app.isStart = false
				console.log('播放时间',app.startTime)
			}
			// if(!app.isEnd && ) {
				app.endTime = Math.round(e.detail.currentTime) // 获取播放秒数并赋值
			// }
			//播放完后调用上报接口
			if(app.duration == e.detail.currentTime){
				app.getReport()
				console.log('播放时间11',e.detail.currentTime)
			}
		},
		// 视频出现缓冲时触发
		onWaiting(e) {
			console.log('获取视频出现缓冲时间',e)
			this.isStart = true
		},
		// 视频播放结束事件
		onEnded() {
			this.isEnd = true
		},
		// 视频出错事件
		onError() {
			const app = this
			console.log('视频出错')
			if(app.timer){
				clearInterval(app.timer);
				app.timer = null;
			}
			app.isError = true
		},
		// 转换时间戳
		formatTime (data) {
			const currTime = timestampChangDate('YYYY-mm-dd HH:MM:SS', data * 1000)
			return currTime
		},
		// 切换标签项
		onChangeTab(index) {
		  const app = this
		  // 设置当前选中的标签
		  app.curTab = index
		  if(index == 1) {
			  app.getCommentList() // 评论列表
		  }
		  // 刷新订单列表
		  // app.onRefreshList()
		},
		
		// 图片地址拼接
		getImgUrl(val) {
		    const url = ImgUrlPrefix(val)
		    return url
		},
		
		// 失去焦点 - 隐藏键盘
		handleBlur() {
			console.log('失去焦点')
			this.emojiVisible = false
			this.keyboardStatus = false;
			this.keyboardHeight = 0;
		},
		// 发送评论消息
		handleSendMsg() {
			const app = this
			if (app.messages.trim()) {
				FindApi.corseCommentCreate({
					id: app.id,
					"content": app.messages
				}).then(result => {
					console.log(result, '发送消息')
					app.messages = ''
					app.getCommentList() // 评论列表
					app.$toast(result.message)
				}).catch(() => {
					
				})
			} else {
				app.$toast('请输入内容')
			}
			// store.dispatch('sendSocketMessage', obj)
		},
		showEmoji() {
			this.emojiVisible = !this.emojiVisible  
		},
		// 选择表情
		handleChang(item) {
		  this.messages = this.messages + item.emoji
		  this.emojiVisible = !this.emojiVisible  
		},
		// 滚动到底部
		scrollToBottom() {
			
		},
		scrollToBottom2() {
			
		},
		formattedDate(val) {
		  const date = new Date(val * 1000);
		  const year = date.getFullYear();
		  const month = String(date.getMonth() + 1).padStart(2, '0');
		  const day = String(date.getDate()).padStart(2, '0');
		  const hours = String(date.getHours()).padStart(2, '0');
		  const minutes = String(date.getMinutes()).padStart(2, '0');
		  const seconds = String(date.getSeconds()).padStart(2, '0');
		  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},
		// 删除
		handleDelete(val) {
			const app = this
			FindApi.corseCommentDeleted({
				id: val.id
			}).then(result => {
				console.log(result, '删除')
				app.getCommentList() // 评论列表
				app.$toast(result.message)
			}).catch(() => {
				
			})
		},
		
		// 键盘相关事件
		onKeyborardHeightChange(event) {
			console.log('键盘相关事件',event, this.keyboardStatus)
			this.keyboardHeight = event.detail.height;
		},
		
		goCourse(val) {
			this.$navTo('pages/course/courseDetails', { id: val.id, name: val.title })
		},
		
		async handleSelect(val) {
			const app =this
			this.show = false
			console.log(val.expire_time, storage.get(STATUS),'时间222')
			if((this.get_expire_time(storage.get(STATUS)) <= 0 && val.permission == 20)) {
				app.$toast('很抱歉，会员权限已过期')
				return
			}
			if(val.expire_time > 0) {
				app.$toast('很抱歉，当前为锁定状态')
				return
			}
			this.selectId = val.id
			this.selectObject = val
			app.timer = null
			clearInterval(app.timer)
			this.getCoursePalyer()
		},
		
		handleShow(val) {
			this.show = true
			this.selectList = val
		},
		// 判断锁定时间
		get_expire_time(val) {
			const date = new Date().getTime();
			if(val && val != '') {
				let time = val * 1000 - date
				console.log('时间1111',time,date)
				return time
			} else {
				return 0
			}
		},
		// 倒计时结束事件
		handleEnd(val, index) {
		    const app = this
			let array  = []
			let array2  = []
			array2 = app.info.course.map((row, m) =>{
			   array = row.course.map((item,idx) => {
				  return {...item, expire_time: index == idx ? -1 : item.expire_time }
			   })
			   return {...row, course: array, open: m == 0 ? true: false}
			})
			console.log('倒计时结束',array,array2)
			app.info.course = array2
		},
	  },
	  /**
	   * 下拉刷新
	   */
	  onPullDownRefresh() {
	  	console.log('下拉刷新')
	    // 获取首页数据
	    this.getCourseList()
	    uni.stopPullDownRefresh()
	  },
	}
</script>

<style scoped lang="scss">
.container {
  // 设置ios刘海屏底部横线安全区域
  padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
  position: relative;
}
 .live-video{
   width: 100%;
   height: 28vh;
   object-fit: cover; /* 确保视频撑满父容器 */
 }
 .live-video-btn{
	 width: 100%;
	 height: 28vh;
	 object-fit: cover; /* 确保视频撑满父容器 */
	 position: absolute;
	 top: 0;
	 right: 0;
	 z-index: 11;
	 text-align: center;
	 background-color: rgba(0,0,0,0.3);
	 .course-bg-image{
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height:100%;
	 }
 }
  .play-btn-icon{
	  width: 120rpx;
	  height: 120rpx;
	  transform: translate(0px, 150rpx);
	  opacity: 0.6;
  }
 // 卡片区域
 .card-area {
   margin-top: 0rpx;
   padding: 0 30rpx 20rpx 30rpx;
   background-color: #fff;
   .u-node {
   		width: 44rpx;
   		height: 44rpx;
   		border-radius: 100rpx;
   		display: flex;
   		justify-content: center;
   		align-items: center;
   		background: #d0d0d0;
   	}
   	
   	.u-order-title {
   		color: #333333;
   		font-weight: bold;
   		font-size: 32rpx;
   	}
   	
   	.u-order-desc {
   		color: rgb(150, 150, 150);
   		font-size: 28rpx;
   		margin-bottom: 6rpx;
   	}
   	
   	.u-order-time {
   		color: rgb(200, 200, 200);
   		font-size: 26rpx;
   	}
	.chapter-line-content{
		display: flex;
		justify-content: space-between;
	}
	.chapter-video{
		width: 24vh;
		height: 15vh;
		object-fit: cover; /* 确保视频撑满父容器 */
		border-radius: 10rpx;
	}
	.list-ss{
		position: relative;
		.items-image{
			width: 24vh;
			height: 15vh;
			object-fit: cover; /* 确保视频撑满父容器 */
			border-radius: 10rpx;
		}
		.items-icon-play{
		  position: absolute;
		  top: 0;
		  left:0;
		  width: 100%;
		  height: 70%;
		  line-height: 226rpx;
		  text-align: center;
		  border-radius: 20rpx;
		  // background-color: rgba(255,255,255,0.2);
		  .items-icon-image{
			  width: 80rpx;
			  height: 80rpx;
			  text-align: center;
			  opacity: 0.4;
		  }
		}
	}
 }
 // 通栏卡片
 .i-card {
   background: #fff;
   padding: 24rpx 24rpx;
   width: 100%;
   // box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
   margin: 0 auto 30rpx auto;
   border-radius: 20rpx;
 }
 .course-title{
	 font-size: 32rpx;
	 font-weight: bold;
	 line-height: 60rpx;
	 margin: 20rpx 0;
 }
 .course-content{
	 font-size: 28rpx;
	 line-height: 40rpx;
	 color: #333;
	 margin: 20rpx 0 20rpx 0;
	 display: flex;
	 align-items: center;
	 .course-avatar{
		 width:70rpx;
		 height:70rpx;
		 border-radius: 50%;
		 margin-right:10rpx;
	 }
	 .text-teacher{
		 color: #999;
	 }
 }
 .chapter-list{
	 padding: 20rpx 8rpx 20rpx 0;
	 border-top: 1rpx solid #eee;
	 border-bottom: 1rpx solid #eee;
 }
 .play-list{
	 display: flex;
	 align-items: center;
 }
 #courseBox{
	 width: 100%;
	 white-space: nowrap;
 }
 #courseBox2{
	 width: 95%;
	 white-space: nowrap;
 }
 .course-box{
	 padding: 10rpx 0 10rpx 0;
	 overflow-x: auto;
	 display: flex;
	 .list-mk{
		 min-height: 100rpx;
		 padding: 30rpx 20rpx 0rpx 20rpx;
		 margin-right: 14rpx;
		 border: 1rpx solid #ccc;
		 border-radius: 10rpx;
		 // color: #333;
		 position: relative;
		 min-width: 190rpx;
		 text-align: center;
		 cursor: pointer;
	 }
	 .list-mk-active{
		 border: 1rpx solid #12a15c;
		 color: #12a15c;
	 }
	 .disabled-mk{
		 background-color: rgba(0,0,0,0.3);
		 position: absolute;
		 top: 0;
		 left: 0;
		 width:100%;
		 height:100%;
		 text-align: center;
		 border-radius: 10rpx;
		 color:  #f50;
		 .u-count-down__text{
			 color: #f50
		 }
	 }
	 .tag-vip{
		 position: absolute;
		 top: 0;
		 right: 0;
		 line-height: 30rpx;
		 text-align: center;
		 .course-vip{
			 width: 60rpx;
			 border-top-right-radius: 10rpx;
			 border-bottom-left-radius: 10rpx;
			 padding: 4rpx 10rpx 0rpx 10rpx;
			 background-color: #dbf1e1;
			 font-size: 24rpx;
			 color: #19be6b;
		 }
	 }
 }
 .course-box-2{
	flex-wrap: wrap;
    padding: 70rpx 30rpx 40rpx 30rpx;
	.list-mk{
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}
 }
 
 // 其他信息
 .order-info {
 
   .info-item {
     display: flex;
     margin-bottom: 24rpx;
 
     &:last-child {
       margin-bottom: 0;
     }
 
     .item-lable {
       display: flex;
       align-items: center;
       font-size: 24rpx;
       color: #999;
       margin-right: 30rpx;
     }
 
     .item-content {
       flex: 1;
       display: flex;
       align-items: center;
       font-size: 26rpx;
       color: #333;
     }
   }
 }
 .details-image{
	 width: 100%;
	 height: 28vh;
	 background-color: #eef0f5;
 }
 .tab-title{
	 font-size: 32rpx;
	 line-height: 60rpx;
	 margin: 20rpx 0;
	 padding: 0 20rpx;
	 font-weight: bold;
	 border-bottom: 1rpx solid #eee;
 }
 .con-ss{
	 padding: 20rpx 20rpx 0 20rpx;
	 font-size: 26rpx;
 }
 .comment-box{
	 background-color: #fff;
	  .course-message{
		// padding: 20rpx 6rpx;
		max-height: 39vh;
		overflow-y: auto;
	 }
	 .item {
	 	padding: 40rpx 30rpx 40rpx 30rpx;
	 	margin: 0 0 10rpx 0;
	 	border-bottom: 1rpx solid #F5F4F5;
	 
	 	.avatar {
	 		width: 90rpx;
	 		height: 90rpx;
	 		border-radius: 50%;
	 		background-color: #eef0f5;
	 	}
	 
	 	.content {
	 		flex: 2;
	 		margin-left: 20rpx;
	 		position: relative;
	 
	 		.name {
	 			font-size: 28rpx;
	 			font-weight: 700;
	 			color: #596D95;
	 			margin-bottom: 10rpx;
	 		}
	 
	 		.text {
	 			font-size: 28rpx;
	 			line-height: 44rpx;
				margin:5rpx 0;
	 		}
	 
	 		.video {
	 			width: 400rpx;
	 			height: 400rpx;
	 		}
	 
	 		.images {
	 			flex-wrap: wrap;
	 			padding: 0 0 10rpx 0;
	 		}
	 
	 		.address {
	 			color: #596D95;
	 			font-size: 26rpx;
	 			margin: 10rpx 0;
	 		}
	 	}
		.line {
			position: relative;
			z-index: 999;
		}
		
		.time {
			color: #999;
			font-size: 24rpx;
		}
		
		.icon {
			font-size: 24rpx;
		}
	 }
	 .foot-position{
	 	position: fixed;
	 	bottom: 0rpx;
	 	left: 0rpx;
		width:100%;
		z-index: 999;
		transition-property: bottom;
		transition-duration: 100ms;
		background-color: #fff;
	 	.foot-content{
	 		display: flex;
	 		align-items: center;
	 		padding: 16rpx 16rpx 50rpx 16rpx;
			border-top: 1rpx solid #eee;
			.left-c{
				display: flex;
				align-items: center;
				flex:1;
				padding: 14rpx 20rpx;
				margin-right: 20rpx;
				border-radius: 60rpx;
				background-color: #f0f0f0;
			}
	 		.image-item{
	 			width:46rpx;
	 			height:46rpx;
	 			margin-right:16rpx;
	 		}
	 		.foot-input{
	 			flex: 1;
	 		}
	 		.button {
	 		  width: 120rpx;
	 		  height: 68rpx;
	 		  background: linear-gradient(to right, #12a15c, #12a15c);
	 		  color: #fff;
	 		  font-size: 26rpx;
	 		  border-radius: 50rpx;
	 		  letter-spacing: 5rpx;
	 		  display: flex;
	 		  justify-content: center;
	 		  align-items: center;
	 		
	 		  // 禁用按钮
	 		  &.disabled {
	 		    opacity: 0.6;
	 		  }
	 		}
	 	}
	 	.emoji-box{
	 		padding: 16rpx;
	 		max-height: 250rpx;
	 		overflow: auto;
	 		.emoji-title{
	 			line-height: 40rpx;
	 			font-weight: bold;
	 		}
	 		.emoji-item{
	 		    margin-right: 16rpx;
	 		    margin-bottom: 10rpx;
	 		}
	 	}
	 }
 }
</style>